<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="content">
            <div class="content-box">
                <div class="top-title">阅读详情</div>
                <h6 class='readed'>标题</h6>
                <p class="read-recod">{{!content.title?'':content.title}}</p>
                <!-- <div class="note">
                    <span>{{content.createTime}}</span>
                </div> -->
                <h6 class='readed'>已阅读（<span>{{content.readNum}}</span>人）</h6>
                <p class="read-recod">
                    {{!content.read?'':content.read.join('，')}}
                </p>
                <h6 class='readed'>未阅读（<span>{{content.unreadNum}}</span>人）</h6>
                <p class="read-no">
                    {{!content.unread?'':content.unread.join('，')}}
                </p>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">返 回</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import { details } from 'api/bulletinBoard';

    export default {
        name: 'readDetails',
        components: { Levelbar },
        data() {
            return {
                content: {
                    title: '',
                    createTime: '',
                    readNum: '',
                    read: [],
                    unreadNum: '',
                    unread: ''
                }
            }
        },
        created() {
            this.detailsFu();
        },
        methods: {
            detailsFu() {
                let articleId = this.$route.params.id;
                details(articleId).then(response => {
                    if (response.data.status == 200) {
                        this.content = response.data.content;
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                })               
            },
            // 取消
            cancel() {
                this.$router.go(-1)
            }
            
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss"  scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        font-size: 14px;
        color: #333;
        $bgcolor: #fff;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        .content {
            
            @include showTitle();
            .content-box {
                padding:0 50px;
                h6 {
                    font-size: 15px;
                    margin: 10px 0;
                    font-weight: 700;
                    line-height: normal;
                }
                .top-title{
                    padding-top:8px;
                    text-align: center;
                    font-size: 18px;
                    color: #333;
                    line-height: 72px;
                    font-weight: bold;
                    font-family: Microsoft YaHei;
                    border-bottom: 1px solid #ddd;
                }
                .readed {
                    padding:6px 0 6px 20px;
                    position: relative;
                    &:before{
                        content: '';
                        width: 4px;
                        height: 15px;
                        position: absolute;
                        left: 0;
                        margin-top: -7px;
                        top: 50%;
                        background: #ff5e2c;
                    }
                }
                .read-recod {
                    line-height:1.8;
                    padding-left: 20px;
                }
                .read-no {
                    line-height:1.8;
                    padding-bottom:12px;
                    padding-left: 20px;
                }
                .dialog-footer {
                    text-align: center;
                    padding: 30px 0;
                }
            }
        }
        
    }
</style>